<template>
	<div class="tcpdump-command-generator">
		<!-- 主要工作区域 -->
		<div class="main-workspace">
			<!-- 模板选择区域 -->
			<div class="template-section">
				<div class="workspace-card template-card">
					<div class="card-content">
						<div class="section-header">
							<h3 class="template-title">快速模板</h3>
							<span class="template-subtitle">
								选择预设模板快速生成 tcpdump 命令
							</span>
						</div>
						<div class="template-grid">
							<div
								v-for="template in templateOptions"
								:key="template.value"
								class="template-item"
								@click="applyTemplate(template.value)">
								<div class="template-icon">
									<component :is="template.icon" />
								</div>
								<div class="template-info">
									<h4 class="template-name">
										{{ template.label }}
									</h4>
									<p class="template-desc">
										{{ template.description }}
									</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="workspace-grid">
				<!-- 左侧配置区域 -->
				<div class="workspace-card input-card">
					<div class="card-content">
						<!-- 基本配置 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">基本配置</h4>
							</div>
							<div class="config-grid">
								<n-form-item label="网络接口">
									<n-select
										v-model:value="config.interface"
										:options="interfaceOptions"
										placeholder="选择或输入网络接口"
										filterable
										clearable
										tag />
									<template #feedback>
										<span class="field-hint">
											指定要监听的网络接口，留空表示所有接口
										</span>
									</template>
								</n-form-item>
								<n-form-item label="输出文件">
									<div class="output-file-container">
										<div class="output-file-switch">
											<n-switch
												v-model:value="
													config.enableOutputFile
												"
												size="small" />
											<span class="switch-label">
												保存到文件
											</span>
										</div>
										<n-input
											v-if="config.enableOutputFile"
											v-model:value="config.outputFile"
											placeholder="例如: capture.pcap"
											clearable />
									</div>
									<template #feedback>
										<span class="field-hint">
											开启后将抓包数据保存到指定文件
										</span>
									</template>
								</n-form-item>
								<n-form-item label="抓包数量">
									<n-input
										v-model:value="config.count"
										placeholder="例如: 100"
										clearable />
									<template #feedback>
										<span class="field-hint">
											抓取指定数量的包后停止
										</span>
									</template>
								</n-form-item>
								<n-form-item label="超时时间(秒)">
									<n-input
										v-model:value="config.timeout"
										placeholder="例如: 30"
										clearable />
									<template #feedback>
										<span class="field-hint">
											抓包超时时间，单位秒
										</span>
									</template>
								</n-form-item>
							</div>
						</div>

						<!-- 过滤选项 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">过滤选项</h4>
							</div>
							<div class="config-grid">
								<n-form-item label="协议类型">
									<n-select
										v-model:value="config.protocol"
										:options="protocolOptions"
										placeholder="选择协议类型"
										clearable />
									<template #feedback>
										<span class="field-hint">
											过滤特定协议的数据包
										</span>
									</template>
								</n-form-item>
								<n-form-item label="源IP地址">
									<n-input
										v-model:value="config.srcHost"
										placeholder="例如: 192.168.1.1, 10.0.0.1"
										clearable />
									<template #feedback>
										<span class="field-hint">
											过滤来自指定IP的数据包，支持单个IP或网段
										</span>
									</template>
								</n-form-item>
								<n-form-item label="目标IP地址">
									<n-input
										v-model:value="config.dstHost"
										placeholder="例如: 8.8.8.8, 192.168.1.100"
										clearable />
									<template #feedback>
										<span class="field-hint">
											过滤发往指定IP的数据包，支持单个IP或网段
										</span>
									</template>
								</n-form-item>
								<n-form-item label="端口号">
									<n-input
										v-model:value="config.port"
										placeholder="例如: 80, 443, 22, 8080"
										clearable />
									<template #feedback>
										<span class="field-hint">
											过滤特定端口的数据包，支持单个端口或端口范围
										</span>
									</template>
								</n-form-item>
								<n-form-item label="自定义过滤表达式">
									<n-input
										v-model:value="config.customFilter"
										placeholder="例如: host 192.168.1.1 and port 80"
										clearable />
									<template #feedback>
										<span class="field-hint">
											自定义 BPF 过滤表达式
										</span>
									</template>
								</n-form-item>
							</div>
						</div>

						<!-- 显示选项 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">显示选项</h4>
							</div>
							<div class="config-grid">
								<n-form-item label="详细输出级别">
									<n-select
										v-model:value="config.verboseLevel"
										:options="verboseLevelOptions"
										placeholder="选择详细输出级别" />
									<template #feedback>
										<span class="field-hint">
											控制输出的详细程度
										</span>
									</template>
								</n-form-item>
								<n-form-item label="解析级别">
									<n-select
										v-model:value="config.resolveLevel"
										:options="resolveLevelOptions"
										placeholder="选择解析级别" />
									<template #feedback>
										<span class="field-hint">
											控制主机名和端口名的解析
										</span>
									</template>
								</n-form-item>
							</div>
							<div class="options-row">
								<div class="option-item">
									<label class="option-label">
										十六进制输出 (-x)
									</label>
									<n-switch
										v-model:value="config.hexDump"
										size="small" />
								</div>
								<div class="option-item">
									<label class="option-label">
										ASCII输出 (-A)
									</label>
									<n-switch
										v-model:value="config.asciiDump"
										size="small" />
								</div>
							</div>
						</div>

						<!-- 高级选项 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">高级选项</h4>
							</div>
							<div class="config-grid">
								<n-form-item label="缓冲区大小">
									<n-input
										v-model:value="config.bufferSize"
										placeholder="例如: 262144"
										clearable />
									<template #feedback>
										<span class="field-hint">
											设置内核缓冲区大小，单位字节
										</span>
									</template>
								</n-form-item>
								<n-form-item label="快照长度">
									<n-input
										v-model:value="config.snaplen"
										placeholder="例如: 1514"
										clearable />
									<template #feedback>
										<span class="field-hint">
											设置每个数据包的最大捕获长度
										</span>
									</template>
								</n-form-item>
								<n-form-item label="用户">
									<n-input
										v-model:value="config.user"
										placeholder="例如: root"
										clearable />
									<template #feedback>
										<span class="field-hint">
											以指定用户身份运行
										</span>
									</template>
								</n-form-item>
								<n-form-item label="进程组">
									<n-input
										v-model:value="config.group"
										placeholder="例如: wireshark"
										clearable />
									<template #feedback>
										<span class="field-hint">
											以指定组身份运行
										</span>
									</template>
								</n-form-item>
							</div>
						</div>

						<!-- 时间戳选项 -->
						<div class="config-section">
							<div class="section-header">
								<h4 class="section-title">时间戳选项</h4>
							</div>
							<div class="config-grid">
								<n-form-item label="时间戳格式">
									<n-select
										v-model:value="config.timestampFormat"
										:options="timestampFormatOptions"
										placeholder="选择时间戳格式" />
									<template #feedback>
										<span class="field-hint">
											控制时间戳的显示格式
										</span>
									</template>
								</n-form-item>
							</div>
						</div>
					</div>
				</div>

				<!-- 右侧结果区域 -->
				<div class="workspace-card output-card">
					<div class="card-content">
						<!-- 生成的命令 -->
						<div class="command-output-section">
							<div class="section-header">
								<h5 class="output-title">
									生成的 tcpdump 命令
								</h5>
								<div class="output-badge">tcpdump</div>
							</div>
							<n-input
								v-model:value="generatedCommand"
								type="textarea"
								:rows="16"
								placeholder="配置参数后将在这里显示生成的 tcpdump 命令..."
								readonly
								class="command-output" />
						</div>

						<!-- 操作按钮 -->
						<div class="action-buttons">
							<n-button
								@click="clearAll"
								size="small"
								class="clear-btn">
								<template #icon>
									<svg
										width="16"
										height="16"
										viewBox="0 0 24 24"
										fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path
											d="M3 6H5H21"
											stroke="currentColor"
											stroke-width="2"
											stroke-linecap="round"
											stroke-linejoin="round" />
										<path
											d="M8 6V4C8 3.46957 8.21071 2.96086 8.58579 2.58579C8.96086 2.21071 9.46957 2 10 2H14C14.5304 2 15.0391 2.21071 15.4142 2.58579C15.7893 2.96086 16 3.46957 16 4V6M19 6V20C19 20.5304 18.7893 21.0391 18.4142 21.4142C18.0391 21.7893 17.5304 22 17 22H7C6.46957 22 5.96086 21.7893 5.58579 21.4142C5.21071 21.0391 5 20.5304 5 20V6H19Z"
											stroke="currentColor"
											stroke-width="2"
											stroke-linecap="round"
											stroke-linejoin="round" />
									</svg>
								</template>
								清空
							</n-button>
							<n-button
								v-if="generatedCommand"
								@click="copyResult"
								size="small"
								type="primary">
								<template #icon>
									<svg
										width="16"
										height="16"
										viewBox="0 0 24 24"
										fill="none"
										xmlns="http://www.w3.org/2000/svg">
										<path
											d="M16 4H18C19.1046 4 20 4.89543 20 6V18C20 19.1046 19.1046 20 18 20H6C4.89543 20 4 19.1046 4 18V16"
											stroke="currentColor"
											stroke-width="2"
											stroke-linecap="round"
											stroke-linejoin="round" />
										<path
											d="M15 2H9C7.89543 2 7 2.89543 7 4V14C7 15.1046 7.89543 16 9 16H15C16.1046 16 17 15.1046 17 14V4C17 2.89543 16.1046 2 15 2Z"
											stroke="currentColor"
											stroke-width="2"
											stroke-linecap="round"
											stroke-linejoin="round" />
									</svg>
								</template>
								复制
							</n-button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useClipboard } from '@vueuse/core';
import { useMessage } from 'naive-ui';

// 图标组件
const TcpIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 17L12 22L22 17" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 12L12 17L22 12" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<circle cx="12" cy="7" r="2" fill="#3b82f6"/>
		</svg>
	`
};

const UdpIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 17L12 22L22 17" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 12L12 17L22 12" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<circle cx="12" cy="7" r="2" fill="#10b981"/>
		</svg>
	`
};

const IcmpIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 17L12 22L22 17" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 12L12 17L22 12" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<circle cx="12" cy="7" r="2" fill="#f59e0b"/>
		</svg>
	`
};

const ArpIcon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 17L12 22L22 17" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 12L12 17L22 12" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<circle cx="12" cy="7" r="2" fill="#8b5cf6"/>
		</svg>
	`
};

const Ipv4Icon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 17L12 22L22 17" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 12L12 17L22 12" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<circle cx="12" cy="7" r="2" fill="#ef4444"/>
		</svg>
	`
};

const Ipv6Icon = {
	template: `
		<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 17L12 22L22 17" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<path d="M2 12L12 17L22 12" stroke="#06b6d4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
			<circle cx="12" cy="7" r="2" fill="#06b6d4"/>
		</svg>
	`
};

const { copy } = useClipboard();
const message = useMessage();

// 配置状态
const config = ref({
	interface: 'eth0',
	enableOutputFile: false,
	outputFile: 'capture.pcap',
	count: '',
	timeout: '30',
	protocol: '',
	srcHost: '',
	dstHost: '',
	port: '',
	customFilter: '',
	verboseLevel: '', // 详细输出级别：'', 'v', 'vv'
	hexDump: false,
	asciiDump: false,
	resolveLevel: '', // 解析级别：'', 'n', 'nn'
	bufferSize: '',
	snaplen: '',
	user: '',
	group: '',
	timestampFormat: '' // 时间戳格式：'', 'tttt', 'ttttt', 'tt', 't'
});

// 模板配置
const templates = {
	tcp: {
		interface: 'eth0',
		enableOutputFile: false,
		outputFile: 'tcp_capture.pcap',
		count: '',
		timeout: '30',
		protocol: 'tcp',
		srcHost: '172.22.20.1',
		dstHost: '192.168.103.1',
		port: '22',
		customFilter: '',
		verboseLevel: 'v',
		hexDump: false,
		asciiDump: false,
		resolveLevel: '',
		bufferSize: '',
		snaplen: '',
		user: '',
		group: '',
		timestampFormat: ''
	},
	udp: {
		interface: 'eth0',
		enableOutputFile: false,
		outputFile: 'udp_capture.pcap',
		count: '',
		timeout: '30',
		protocol: 'udp',
		srcHost: '172.22.20.1',
		dstHost: '192.168.103.1',
		port: '53',
		customFilter: '',
		verboseLevel: 'v',
		hexDump: false,
		asciiDump: false,
		resolveLevel: '',
		bufferSize: '',
		snaplen: '',
		user: '',
		group: '',
		timestampFormat: ''
	},
	icmp: {
		interface: 'eth0',
		enableOutputFile: false,
		outputFile: 'icmp_capture.pcap',
		count: '',
		timeout: '30',
		protocol: 'icmp',
		srcHost: '172.22.20.1',
		dstHost: '192.168.103.1',
		port: '',
		customFilter: '',
		verboseLevel: 'v',
		hexDump: false,
		asciiDump: true,
		resolveLevel: '',
		bufferSize: '',
		snaplen: '',
		user: '',
		group: '',
		timestampFormat: ''
	},
	arp: {
		interface: 'eth0',
		enableOutputFile: false,
		outputFile: 'arp_capture.pcap',
		count: '',
		timeout: '30',
		protocol: 'arp',
		srcHost: '172.22.20.1',
		dstHost: '192.168.103.1',
		port: '',
		customFilter: '',
		verboseLevel: 'v',
		hexDump: false,
		asciiDump: true,
		resolveLevel: '',
		bufferSize: '',
		snaplen: '',
		user: '',
		group: '',
		timestampFormat: ''
	},
	ipv4: {
		interface: 'eth0',
		enableOutputFile: false,
		outputFile: 'ipv4_capture.pcap',
		count: '',
		timeout: '30',
		protocol: 'ip',
		srcHost: '172.22.20.1',
		dstHost: '192.168.103.1',
		port: '',
		customFilter: '',
		verboseLevel: 'v',
		hexDump: false,
		asciiDump: false,
		resolveLevel: '',
		bufferSize: '',
		snaplen: '',
		user: '',
		group: '',
		timestampFormat: ''
	},
	ipv6: {
		interface: 'eth0',
		enableOutputFile: false,
		outputFile: 'ipv6_capture.pcap',
		count: '',
		timeout: '30',
		protocol: 'ip6',
		srcHost: '2001:db8::1',
		dstHost: '2001:db8::2',
		port: '',
		customFilter: '',
		verboseLevel: 'v',
		hexDump: false,
		asciiDump: false,
		resolveLevel: '',
		bufferSize: '',
		snaplen: '',
		user: '',
		group: '',
		timestampFormat: ''
	}
};

// 模板选项
const templateOptions = [
	{
		label: 'TCP 协议',
		value: 'tcp',
		description: '抓取 TCP 协议数据包',
		icon: TcpIcon
	},
	{
		label: 'UDP 协议',
		value: 'udp',
		description: '抓取 UDP 协议数据包',
		icon: UdpIcon
	},
	{
		label: 'ICMP 协议',
		value: 'icmp',
		description: '抓取 ICMP 协议数据包',
		icon: IcmpIcon
	},
	{
		label: 'ARP 协议',
		value: 'arp',
		description: '抓取 ARP 协议数据包',
		icon: ArpIcon
	},
	{
		label: 'IPv4 协议',
		value: 'ipv4',
		description: '抓取 IPv4 协议数据包',
		icon: Ipv4Icon
	},
	{
		label: 'IPv6 协议',
		value: 'ipv6',
		description: '抓取 IPv6 协议数据包',
		icon: Ipv6Icon
	}
];

// 网络接口选项
const interfaceOptions = [
	{ label: 'eth0 (以太网)', value: 'eth0' },
	{ label: 'eth1 (以太网)', value: 'eth1' },
	{ label: 'wlan0 (无线网)', value: 'wlan0' },
	{ label: 'wlan1 (无线网)', value: 'wlan1' },
	{ label: 'lo (本地回环)', value: 'lo' },
	{ label: 'any (所有接口)', value: 'any' },
	{ label: 'en0 (macOS)', value: 'en0' },
	{ label: 'en1 (macOS)', value: 'en1' },
	{ label: 'ens33 (VMware)', value: 'ens33' },
	{ label: 'ens34 (VMware)', value: 'ens34' }
];

// 协议选项
const protocolOptions = [
	{ label: 'TCP', value: 'tcp' },
	{ label: 'UDP', value: 'udp' },
	{ label: 'ICMP', value: 'icmp' },
	{ label: 'ARP', value: 'arp' },
	{ label: 'IPv4', value: 'ip' },
	{ label: 'IPv6', value: 'ip6' }
];

// 详细输出级别选项
const verboseLevelOptions = [
	{ label: '默认', value: '' },
	{ label: '详细输出 (-v)', value: 'v' },
	{ label: '更详细输出 (-vv)', value: 'vv' }
];

// 解析级别选项
const resolveLevelOptions = [
	{ label: '默认', value: '' },
	{ label: '不解析主机名 (-n)', value: 'n' },
	{ label: '不解析主机名和端口名 (-nn)', value: 'nn' }
];

// 时间戳格式选项
const timestampFormatOptions = [
	{ label: '默认', value: '' },
	{ label: '微秒精度 (-tttt)', value: 'tttt' },
	{ label: '纳秒精度 (-ttttt)', value: 'ttttt' },
	{ label: '相对时间 (-tt)', value: 'tt' },
	{ label: '不显示时间戳 (-t)', value: 't' }
];

// 生成的命令
const generatedCommand = computed(() => {
	const parts: string[] = ['tcpdump'];

	// 基本选项
	if (config.value.interface) {
		parts.push(`-i ${config.value.interface}`);
	}

	if (config.value.enableOutputFile && config.value.outputFile) {
		parts.push(`-w ${config.value.outputFile}`);
	}

	if (config.value.count) {
		parts.push(`-c ${config.value.count}`);
	}

	if (config.value.timeout) {
		parts.push(`-G ${config.value.timeout}`);
	}

	// 显示选项
	if (config.value.verboseLevel) {
		parts.push(`-${config.value.verboseLevel}`);
	}

	if (config.value.hexDump) {
		parts.push('-x');
	}

	if (config.value.asciiDump) {
		parts.push('-A');
	}

	if (config.value.resolveLevel) {
		parts.push(`-${config.value.resolveLevel}`);
	}

	// 高级选项
	if (config.value.bufferSize) {
		parts.push(`-B ${config.value.bufferSize}`);
	}

	if (config.value.snaplen) {
		parts.push(`-s ${config.value.snaplen}`);
	}

	if (config.value.user) {
		parts.push(`-Z ${config.value.user}`);
	}

	if (config.value.group) {
		parts.push(`-g ${config.value.group}`);
	}

	// 时间戳选项
	if (config.value.timestampFormat) {
		parts.push(`-${config.value.timestampFormat}`);
	}

	// 过滤表达式
	let filterExpression = '';

	// 协议过滤
	if (config.value.protocol) {
		filterExpression += config.value.protocol;
	}

	// 源主机过滤
	if (config.value.srcHost) {
		if (filterExpression) filterExpression += ' and ';
		filterExpression += `src host ${config.value.srcHost}`;
	}

	// 目标主机过滤
	if (config.value.dstHost) {
		if (filterExpression) filterExpression += ' and ';
		filterExpression += `dst host ${config.value.dstHost}`;
	}

	// 端口过滤
	if (config.value.port) {
		if (filterExpression) filterExpression += ' and ';
		filterExpression += `port ${config.value.port}`;
	}

	// 自定义过滤表达式
	if (config.value.customFilter) {
		if (filterExpression) filterExpression += ' and ';
		filterExpression += `(${config.value.customFilter})`;
	}

	// 添加过滤表达式
	if (filterExpression) {
		parts.push(filterExpression);
	}

	return parts.join(' ');
});

// 应用模板
const applyTemplate = (templateKey: string) => {
	if (templateKey && templates[templateKey as keyof typeof templates]) {
		const template = templates[templateKey as keyof typeof templates];
		config.value = { ...template };
	}
};

// 清空所有配置
const clearAll = () => {
	config.value = {
		interface: 'eth0',
		enableOutputFile: false,
		outputFile: 'capture.pcap',
		count: '',
		timeout: '30',
		protocol: '',
		srcHost: '',
		dstHost: '',
		port: '',
		customFilter: '',
		verboseLevel: '',
		hexDump: false,
		asciiDump: false,
		resolveLevel: '',
		bufferSize: '',
		snaplen: '',
		user: '',
		group: '',
		timestampFormat: ''
	};
};

// 复制结果
const copyResult = async () => {
	if (generatedCommand.value) {
		await copy(generatedCommand.value);
		message.success('命令已复制到剪贴板');
	}
};
</script>

<style scoped>
.tcpdump-command-generator {
	min-height: 100vh;
	background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
	padding: 2rem;
}

.main-workspace {
	max-width: 1600px;
	margin: 0 auto;
}

.template-section {
	margin-bottom: 2rem;
}

.template-card {
	background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
	border: 1px solid #cbd5e0;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.template-title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
	color: #2d3748;
}

.template-subtitle {
	font-size: 0.9rem;
	color: #718096;
	margin-top: 0.25rem;
}

.template-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin-top: 1.5rem;
}

.template-item {
	background: white;
	border: 2px solid #e2e8f0;
	border-radius: 12px;
	padding: 1rem;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.template-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #1e40af, #7c3aed);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.template-item:hover {
	border-color: #1e40af;
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(30, 64, 175, 0.15);
}

.template-item:hover::before {
	opacity: 1;
}

.template-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
	border: 2px solid #e2e8f0;
	border-radius: 10px;
	margin-bottom: 0.75rem;
	transition: all 0.3s ease;
}

.template-item:hover .template-icon {
	background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
	border-color: #1e40af;
	transform: scale(1.05);
}

.template-item:hover .template-icon svg {
	filter: brightness(0) invert(1);
}

.template-info {
	text-align: center;
}

.template-name {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.25rem 0;
	color: #2d3748;
	transition: color 0.3s ease;
}

.template-item:hover .template-name {
	color: #1e40af;
}

.template-desc {
	font-size: 0.75rem;
	margin: 0;
	color: #718096;
	line-height: 1.3;
	transition: color 0.3s ease;
}

.template-item:hover .template-desc {
	color: #4a5568;
}

.workspace-grid {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 2rem;
	align-items: start;
}

.workspace-card {
	background: white;
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.clear-btn {
	background: #fed7d7;
	border-color: #feb2b2;
	color: #c53030;
}

.clear-btn:hover {
	background: #feb2b2;
	border-color: #fc8181;
}

.card-content {
	padding: 1.5rem;
}

.config-section {
	margin-bottom: 2rem;
}

.config-section:last-child {
	margin-bottom: 0;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.section-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #2d3748;
	margin: 0;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid #e2e8f0;
}

.field-hint {
	font-size: 0.75rem;
	color: #718096;
	margin-top: 0.25rem;
	display: block;
}

.options-row {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 1rem;
	background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	flex-wrap: wrap;
}

.option-item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: center;
	flex: 1;
	min-width: 120px;
}

.option-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: #2d3748;
	margin: 0;
	text-align: center;
}

.config-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.command-output-section {
	margin-bottom: 1.5rem;
}

.output-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: #2d3748;
}

.output-badge {
	background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
	color: white;
	padding: 0.25rem 0.5rem;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 600;
}

.command-output {
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
	font-size: 0.875rem;
	line-height: 1.5;
	background: #f7fafc;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
}

.action-buttons {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid #e2e8f0;
}

.output-file-container {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.output-file-switch {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.switch-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: #2d3748;
}

/* 响应式设计 */
@media (max-width: 1024px) {
	.workspace-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.config-grid {
		grid-template-columns: 1fr;
	}

	.template-grid {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 0.75rem;
	}

	.template-item {
		padding: 0.75rem;
	}

	.template-icon {
		width: 36px;
		height: 36px;
		margin-bottom: 0.5rem;
	}

	.template-name {
		font-size: 0.85rem;
	}

	.template-desc {
		font-size: 0.7rem;
	}
}

@media (max-width: 768px) {
	.tcpdump-command-generator {
		padding: 1rem;
	}

	.template-grid {
		grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
		gap: 0.5rem;
	}

	.template-item {
		padding: 0.5rem;
	}

	.template-icon {
		width: 32px;
		height: 32px;
		margin-bottom: 0.25rem;
	}

	.template-name {
		font-size: 0.8rem;
		margin-bottom: 0.125rem;
	}

	.template-desc {
		font-size: 0.65rem;
	}

	.options-row {
		flex-direction: column;
		align-items: stretch;
	}

	.option-item {
		flex-direction: row;
		justify-content: space-between;
		min-width: auto;
	}
}
</style>
